<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
    />
    <link
      href="../node_modules/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="./font-awesome-4.7.0/css/font-awesome.min.css"
    />
    <title>我的播放器</title>
  </head>
  <style type="text/css">
    #tracksList .col-2 .fa:hover {
      cursor: pointer;
    }
  </style>
  <body>
    <div class="container">
      <h1>我的播放器</h1>
      <button
        id="musicBtn"
        type="button"
        class="btn btn-primary btn-lg btn-block"
      >
        添加歌曲到曲库
      </button>

      <!-- 展示歌曲的列表 -->
      <div id="tracksList"></div>

      <!-- 展示播放控件 -->
      <div id="player-status"></div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>
